<template>
	<view class="detailsBox">
		<u-swiper :list="imgSources" :effect3d="true" height="380" @click="previewImage"></u-swiper>
		<view class="wrap flex-column">
			<text style="font-size: 16px;" class="textCenter">{{ itemMsg.name }}</text>
			<view style="color: #478F6A;font-size: 13px;line-height:24px" class="flex-column m-b2">
				<text>车型 : {{ itemMsg.carType }}</text>
				<text v-show="itemMsg.type != ''">规格/参数 : {{ itemMsg.type }} <text v-show="itemMsg.params != ''"> / </text> {{ itemMsg.params }} </text>
				<view style="color: #DD524D;" class="flex-column">
					<text>参考价 : ￥{{ itemMsg.referencePrice }}</text>
					<text >含量价 : ￥{{ itemMsg.contentPrice }}</text>
				</view>
			</view>
			<template> <!-- 成分价格构成 -->
				<text class="title">成分价格构成</text>
				<u-line color="#9a9a9a" />
				<view style="color: #4387CA;font-size: 12px;float: right;padding: 1%;">
					<text style="float: right;" @click="nightingaleChart">点击查看价格构成图</text>
				</view>
				<view class="flex-column redText">
					<txet>铂(参考) : ￥{{ itemMsg.platPrice }}</txet>
					<txet>钯(参考) : ￥{{ itemMsg.pallPrice }}</txet>
					<txet>铑(参考) : ￥{{ itemMsg.rhodPrice }}</txet>
				</view>
				<view class="echartsWrap m-b2" v-if="nightingaleChartShow">
					<mpvue-echarts :onInit="initNightingaleChart" />
				</view>
			</template>
			<template><!-- 当前商品描述 -->
				<text class="title">描述</text>
				<u-line color="#9a9a9a" />
				<text style="color: #478F6A;font-size: 13px;margin: 2% 0;">{{itemMsg.description == '' ? '暂无描述' : itemMsg.description}}</text>
			</template>
			<template><!-- 当前商品含量重量 -->
				<text class="title">当前商品含量重量</text>
				<u-line color="#9a9a9a" />
				<txet class="redText">总重量 : {{ itemMsg.weight }} kg</txet>
			</template>
			<template><!-- 即时粉重计算 -->
				<text class="title">即时粉重计算</text>
				<u-line color="#9a9a9a" />
				<text style="color: #707070;line-height:30px;font-size: 13px;">当收到的粉重不一样时，价格会有差异</text>
				<view class="flex-row" style="font-size: 13px;">
					<text style="line-height: 30px;width: 15%;">总重量 : </text>
					<u-input v-model="weight" class="uni-input" type="digit" :border="true" height="50" placeholder=" " style="width: 25%;"/>
					<text style="margin-left: 2%;line-height: 30px;">kg</text>
				</view>
				<view class="flex-row" style="font-size: 13px;line-height: 34px;">
					<text>参考价 : ￥{{ referencePrice }}</text>
					<text style="margin-left: 15%;">含量价 : ￥{{ contentPrice }}</text>
				</view>
				<u-button type="success" size="medium" class="m-b2 textCenter" @click="countPrice">计算</u-button>
			</template>
			<template><!-- 当前三元催化器价格行情 -->
				<text class="title">当前三元催化器价格行情</text>
				<u-line color="#9a9a9a" />
				<view style="color: #4387CA;font-size: 12px;float: right;padding: 1%;">
					<text style="float: right;" @click="lineBarChart">点击查看三元催化器价格行情</text>
				</view>
				<view class="echartsWrap" v-if="ineBarChartlShow">
					<mpvue-echarts :onInit="initLineBarChart" />
				</view>
				<text class="m-b2 textCenter m-t2" style="color: #DD524D;">三元催化属于危废产品，请根据国家政策合法交易！</text>
			</template>
			<view class="textCenter">
				<text class="title m-b4">图片展示</text>
				<view v-for="(item,index) in imgSources" :key="index">
					<image :src="item" style="padding: 1%;" mode="aspectFit" @click="previewImage"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/common/echarts.min'; /*chart.min.js为在线定制*/
	import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';
	import { getMaterialPrice } from '@/common/js/api/api.js'
	let chart = null;
	let chart1 = null;
	export default {
		data() {
			return {
				imgSources: [],
				itemMsg: [],
				nightingaleChartShow: false,
				ineBarChartlShow: false,
				weight: '',
				referencePrice: 0,
				contentPrice: 0,
				createTime: [],
				materialPrice: []
			}
		},
		components: {
			mpvueEcharts
		},
		onLoad: function (option) {
		  const item = JSON.parse(decodeURIComponent(option.item));
			this.itemMsg = item;
			this.imgSources = item.imgSources;
			this.createTime = [];
			this.materialPrice = [];
			let parmas = {
			  page: 0,
			  size: 6,
			  sort: "id,desc"
			};
			getMaterialPrice(parmas).then(res => {
				res.data.content.sort((item1, item2) => item1.id - item2.id);
				res.data.content.forEach(item => {
					var obj = {};
					var rate = item.usdRate / 31.1035;
					obj.pallBid = Math.round(item.pallBid * rate);
					obj.rhodBid = Math.round(item.rhodBid * rate);
					obj.platBid = Math.round(item.platBid * rate);
					this.createTime.push(item.createTime);
					this.materialPrice.push(obj);
				})
			})
			this.onShareAppMessage();
			this.onShareTimeline();
		},
		methods: {
			previewImage() {
				uni.previewImage({
					urls: this.imgSources,
					loop: true,
					indicator: 'default',
					longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								// console.log(err.errMsg);
							}
					}
				});
			},
			initNightingaleChart(canvas, width, height) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				canvas.setChart(chart);
				return chart;
			},
			initLineBarChart(canvas, width, height) {
				chart1 = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				canvas.setChart(chart1);
				return chart1;
			},
			nightingaleChart() {
				this.nightingaleChartShow = !this.nightingaleChartShow;
				setTimeout(() => {
					var option = {
						title: {
							subtext: '三元成分价格对比',
							left: 'center',
							top: '-7%'
						},
						tooltip: {
							trigger: 'item'
						},
						legend: {
							bottom: 'bottom'
						},
						series: [
							{
								name: '成分价格对比',
								type: 'pie',
								radius: ['30%', '50%'],
								center: ['50%', '48%'],
								data: [
									{ value: this.itemMsg['platPrice'], name: '铂(PT)' },
									{ value: this.itemMsg['pallPrice'], name: '钯(PD)' },
									{ value: this.itemMsg['rhodPrice'], name: '铑(RH)' }
								],
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					}
					chart.setOption(option);
				}, 200);
			},
			lineBarChart() {
				this.ineBarChartlShow = !this.ineBarChartlShow;
				var contentPrice = [];
				var referencePrice = [];
				this.materialPrice.forEach(item => {
					var pall = this.itemMsg.pall * item.pallBid;
					var plat = this.itemMsg.plat * item.platBid;
					var rhod = this.itemMsg.rhod * item.rhodBid;
					var price = Math.round((pall + plat + rhod) * this.itemMsg.weight);
					contentPrice.push(price);
					referencePrice.push(price * 0.8);
				})
				setTimeout( () => {
					var option = {
						legend: {
							bottom: 'bottom'
						},
						tooltip: {
						  trigger: 'axis'
						},
						grid: {
							left: '1.5%',
							right: '4%',
							bottom: '12%',
							containLabel: true
						},
						toolbox: {
						  show: true,
							top: '3%',
						  feature: {
						    dataZoom: {
						      yAxisIndex: 'none'
						    },
						    magicType: { type: ['line', 'bar'] },
						    restore: {}
						  }
						},
						xAxis: {
						  type: 'category',
							data: this.createTime
						},
						yAxis: {
							type: 'value'
						},
						series: [
							{
								name: '参考价',
								data: referencePrice,
								type: 'line',
								barWidth: 20,
								smooth: true
							},
							{
								name: '含量价',
								data: contentPrice,
								type: 'line',
								barWidth: 20,
								smooth: true,
								label: {
									show: true,
									position: 'top'
								}
							}
						]
					}
					chart1.setOption(option);
				},200);
			},
			countPrice() {
				this.contentPrice = Math.round(this.itemMsg.contentPrice / this.itemMsg.weight * this.weight);
				this.referencePrice = Math.round(this.contentPrice * 0.8);
			},
			onShareAppMessage() {
				const promise = new Promise(resolve => {
					setTimeout(() => {
						resolve({
							title: '鑫三元催化风向标'
						})
					}, 1000)
				})
				return {
					title: '鑫三元催化风向标',
					promise 
				}
			},
			onShareTimeline() {
				const promise = new Promise(resolve => {
					setTimeout(() => {
						resolve({
							title: '鑫三元催化风向标'
						})
					}, 1000)
				})
				return {
					title: '鑫三元催化风向标',
					promise 
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detailsBox {
		height: 100%;
		width: 100%;
	}
	.wrap {
		padding: 3%;
	}
	.echartsWrap {
		width: 100%;
		height: 200px;
	}
	.redText {
		margin: 2% 0;
		color: #DD524D;
		font-size: 13px;
		line-height:24px
	}
	.title {
		text-align: center;
		color: #838383;
		margin: 1% 0;
		font-size: 13px;
	}
</style>
